---
title: <Puck.Components>
---

import { PuckPreview } from "@/docs/components/Preview";
import { Puck } from "@/puck";

# \<Puck.Components\>

Render a draggable list of components based on the [user-defined components](/docs/api-reference/configuration/config#components) when composing a custom Puck UI. Respects the [`categories` API](/docs/api-reference/configuration/config#categories).

<PuckPreview
  config={{
    components: {
      HeadingBlock: {},
      ParagraphBlock: {},
    },
  }}
  data={{ root: { props: {} }, content: [] }}
>
  <Puck.Components />
</PuckPreview>

```tsx {} showLineNumbers copy
import { Puck } from "@measured/puck";

export function Editor() {
  return (
    <Puck>
      <Puck.Components />
    </Puck>
  );
}
```

## Props

This component doesn't accept any props.
